<template>
  <div id='wrap'>
    <h1>effectScope改造</h1>
    <p>{{ state }}</p>
    <p class="inner" ref="inner"></p>
  </div>
</template>

<script lang='ts'>
export default {
  name: 'scu9',
}
</script>

<script lang='ts' setup>
import { ref,effectScope,onScopeDispose,getCurrentScope,onMounted } from 'vue'
const state=ref(0)
const scope=effectScope()
scope.run(()=>{
    const interval=setInterval(()=>{
        state.value++
        console.log(state.value);
    },1000)
    console.log(scope.active);
    const scope1=getCurrentScope()
    console.log(scope1?'有效作用域':'无效作用域');
    onScopeDispose(()=>{
        clearInterval(interval)
        console.log('作用域销毁,资源注销');
    })
})
setTimeout(()=>{
    scope.stop()
},5000)
console.log(scope.active);
const inner=ref<HTMLElement | null>(null)
// onMounted(()=>{
//     if(inner){
//         console.log(inner.value);
//         inner.value.innerHTML=`<span>${state.value}</span>`
//     }
// })
</script>

<style scoped lang='scss'>

</style>